<template>
    <header class="components-header-box">
        <a-affix>
            <article class="fixedTop-header">
                <div class="container">
                    <a-row type="flex" justify="space-between" align="middle">
                        <a-col :span="6">
                            <aside class="quanguo-tel">
                                全国客服热线：<span>400-600-4982</span>
                            </aside>
                        </a-col>
                        <a-col :span="18">
                            <ul class="fixedTop-header-ul clearfix">
                                <li class="Help-me-find-house">
                                    <a-menu mode="horizontal" theme="light" v-model="NavSelectedKeys" @click="menuClick">
                                        <a-menu-item key="/HelpMeFindHouse">
                                            <i class="iconfont icon-fangzi-copy"></i> 帮我找房
                                        </a-menu-item>
                                    </a-menu>
                                </li>
                                <em>|</em>
                                <li>
                                    <a-menu mode="horizontal" theme="light" v-model="NavSelectedKeys" @click="menuClick">
                                        <a-menu-item key="/Question">
                                            <i class="iconfont icon-wenda"></i> 购房问答
                                        </a-menu-item>
                                    </a-menu>
                                </li>
                                <em>|</em>
                                <li class="attention-weixin">
                                    <a-popover trigger="hover" placement="top":title="null">
                                        <template slot="content">
                                            <figure>
                                                <img src="/static/img/HMYS-dyh-fwh.jpg">
                                            </figure>
                                        </template>
                                        <a href="javaScript:;"><i class="iconfont icon-chakan"></i> 详细信息</a>
                                    </a-popover>
                                </li>
                                <em>|</em>
                                <li class="HMYS-miniprogram">
                                    <a-popover trigger="hover" placement="top":title="null">
                                        <template slot="content">
                                            <figure style="width: 200px;">
                                                <img src="/static/img/HMYS-miniprogram-QRcode.jpg" style="width: 172px;">
                                            </figure>
                                        </template>
                                        <a href="javaScript:;"><i class="iconfont icon-xiaochengxu"></i> 微信小程序</a>
                                    </a-popover>
                                </li>
                                <em>|</em>
                                <li class="no-border">
                                    <a-menu mode="horizontal" theme="light" v-model="NavSelectedKeys" @click="menuClick">
                                        <a-menu-item key="/SiteNav">
                                            <i class="iconfont icon-qianwang1"></i> 网站导航
                                        </a-menu-item>
                                    </a-menu>
                                </li>
                                <li class="no-border login-li clearfix">
                                    <aside class="left no-login-box" v-show="isLoginShow">
                                        <a @click="cellLogin"><i class="iconfont icon-denglu"></i> 登录</a>
                                        |
                                        <a @click="cellRegister">注册</a>
                                    </aside>
                                    <aside class="left is-login-box" v-show="!isLoginShow">
                                        <a-dropdown>
                                            <a href="javascript:;">
                                                <span>{{ isNull0(userName) }}</span>
                                                <a-icon type="down" />
                                            </a>
                                            <a-menu slot="overlay" style="text-align: center" @click="clickDropdownItem">
                                                <a-menu-item name="account"><i class="iconfont icon-zhuce"></i> 个人中心</a-menu-item>
                                                <a-menu-divider />
                                                <a-menu-item name="loginout" divided><i class="iconfont icon-zhuxiao"></i> 注销</a-menu-item>
                                            </a-menu>
                                        </a-dropdown>
                                        <a-avatar icon="user" :src="isNullImg(userHeadPhoto)" style="margin: 0 0 0 10px" />
                                    </aside>
                                </li>
                            </ul>
                        </a-col>
                    </a-row>
                </div>
            </article>
        </a-affix>
        <!--导航条-->
        <nav>
            <div class="container">
                <a-row type="flex" justify="space-between" align="middle">
                    <a-col :span="5">
                        <router-link to="/"><h1><img src="/static/img/HMYS-logo.png" title="首页" alt="首页"></h1></router-link>
                    </a-col>
                    <a-col :span="19" style="margin: 30px 0 0 0;">
                        <a-menu mode="horizontal" theme="light" :defaultSelectedKeys="defaultSelectedKeys" v-model="NavSelectedKeys" @click="menuClick">
                            <a-menu-item key="/"><span>■</span> 首页</a-menu-item>
                            <a-sub-menu key="USHouse">
                                <span slot="title">
                                    <i class="iconfont icon-dudongbieshu"></i> 海外房产
                                </span>
                                <a-menu-item key="/USEstate">美国新房</a-menu-item>
                                <a-menu-item key="/UsedUSEstate">美国二手房</a-menu-item>
                                <a-menu-item key="/THEstate">泰国房产</a-menu-item>
                                <a-menu-item key="/GREstate">希腊房产</a-menu-item>
                                <a-menu-item key="/JPEstate">日本房产</a-menu-item>
                            </a-sub-menu>
                            <a-sub-menu key="ImmigrationStudyAbroad">
                                <span slot="title">
                                    <i class="iconfont icon-zaixianxuexi"></i> 移民留学
                                </span>
                                <a-menu-item key="/USImmigration">美国移民</a-menu-item>
                                <a-menu-item key="/USStudyAbroadHighSchool">美国留学</a-menu-item>
                                <a-menu-item key="/GRImmigration">希腊移民</a-menu-item>
                                <a-menu-item key="/GRStudyAbroad">希腊留学</a-menu-item>
                                <a-menu-item key="/EUImmigration">欧洲移民</a-menu-item>
                            </a-sub-menu>
                            <a-sub-menu key="USDfinancial">
                                <span slot="title">
                                    <i class="iconfont icon-icon_lishuaipeizhi"></i> 美元理财
                                </span>
                                <a-menu-item key="/USInsurance">海外保险</a-menu-item>
                                <a-menu-item key="/USFund">美国基金</a-menu-item>
                            </a-sub-menu>
                            <a-sub-menu key="NewsVideo">
                                <span slot="title">
                                    <i class="iconfont icon-liebiaodaohang_zixun"></i> 资讯·直播
                                </span>
                                <a-menu-item key="/News">海外资讯</a-menu-item>
                                <a-menu-item key="/Video">海外直播</a-menu-item>
                            </a-sub-menu>
                            <a-sub-menu key="AboutHMYS">
                                <span slot="title">
                                    <i class="iconfont icon-gongsizhuye"></i> 关于华美优胜
                                </span>
                                <a-menu-item key="/About">公司简介</a-menu-item>
                                <a-menu-item key="/Exhibition">公司展会</a-menu-item>
                                <a-menu-item key="/SuccessfulCases">成功案例</a-menu-item>
                                <a-menu-item key="/Counselor">置业顾问</a-menu-item>
                                <a-menu-item key="/ContactUs">联系我们</a-menu-item>
                                <a-menu-item key="/SiteCooperation">网站合作</a-menu-item>
                                <a-menu-item key="/Jobs">招聘信息</a-menu-item>
                                <a-menu-item key="/PrivacyAgreement">隐私协议</a-menu-item>
                                <a-menu-item key="/Question">常见问题</a-menu-item>
                            </a-sub-menu>
                        </a-menu>
                    </a-col>
                </a-row>
            </div>
        </nav>

        <p v-show="false">{{getUser}}</p>

        <!--公共登录modal框-->
        <loginModal ref="loginModal" @cellRegisterSon="cellRegisterSon"></loginModal>
        <!--公共注册modal框-->
        <registerModal ref="registerModal" @cellLoginSon="cellLoginSon"></registerModal>

    </header>

</template>

<script>
    import loginModal from '../components/login.vue';//公共登录modal框
    import registerModal from '../components/register.vue';//公共注册modal框

    export default {
        data() {
            return {
                defaultSelectedKeys: ['/'],
                NavSelectedKeys: [this.$route.path.substr(this.$route.path.lastIndexOf('/'))],
                userName: '',       // 用户名
                userHeadPhoto: '',  // 用户头像
                isLoginShow: true,      // 判断是否登录
            }
        },
        computed: {
            //从state获取登录用户的个人信息
            getUser() {
                if(this.$store.getters.get_user){
                    this.isLogin();
                }
                return this.$store.getters.get_user
            }
        },
        created(){
        },
        mounted() {
            //防止url切换页面造成state里的user用户登录数据清空
            if(localStorage.userName && localStorage.userHeadPhoto) {
                this.$store.commit('set_user', {
                    name: this.getLocalStorage('userName', 1000*60*60*24),
                    headPhoto: this.getLocalStorage('userHeadPhoto', 1000*60*60*24),
                });
            }

            //获取汇率数据
            this.getExchangeRateData();
            //获取用户所在城市列表
            this.getLocationList();

            //监测引用公共组件header的页面传过来的登录框状态
            this.$on('header_handleLoginModal', () => {
                this.$refs.loginModal.$emit('handleLoginModal');
            });

        },
        methods: {
            //触发显示登录框
            cellLogin(){
                this.$refs.loginModal.$emit('handleLoginModal');
            },
            //触发显示注册框
            cellRegister(){
                this.$refs.registerModal.$emit('handleRegisterModal');
            },
            // register子组件中触发本父组件方法cellLoginSon，以调用登录modal框
            cellLoginSon(){
                this.$refs.loginModal.$emit('handleLoginModal');
            },
            // login子组件中触发本父组件方法cellRegisterSon，以调用注册modal框
            cellRegisterSon(){
                this.$refs.registerModal.$emit('handleRegisterModal');
            },
            // 判断是否已经登录,如果登录则赋值账号手机号和角色名
            isLogin() {
                this.userName = this.$store.getters.get_user.name;
                this.userHeadPhoto = this.$store.getters.get_user.headPhoto;
                if(this.userName != '' || this.userHeadPhoto != ''){
                    this.isLoginShow = false;
                }
            },
            //点击右上角个人中心菜单项时触发
            clickDropdownItem(e) {
                if(e.item.$attrs.name == 'account'){
                    this.$router.push('/account');
                }else if (e.item.$attrs.name == 'loginout') {
                    // 注销
                    this.$get('/exit').then(res => {
                        if (res.status == 0) {
                            this.$store.commit('set_user', {
                                name: '',
                                headPhoto: '',
                            });
                            localStorage.removeItem('userName');
                            localStorage.removeItem('userHeadPhoto');
                            this.$notification.success({
                                message: '注销成功！',
                            });
                            window.location.reload();
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            },
            //获取汇率数据
            getExchangeRateData() {
                this.$get('/exchange/rate/list').then(res => {
                    if (res.status == 0) {
                        //设置全局使用————汇率数据
                        this.$store.commit('set_exchangeRate', res.data);
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //获取用户所在城市列表
            getLocationList() {
                this.$get('/location/message/list').then(res => {
                    if (res.status == 0) {
                        //设置全局使用————用户所在城市列表
                        this.$store.commit('set_LocationList', res.data);
                    }else{
                        console.log(res.msg);
                    }
                });
            },

            //菜单栏点击跳转路由
            menuClick({ item, key, keyPath }){
                // console.log({ item, key, keyPath })
                this.$router.push( key );
            }

        },
        components:{
            loginModal,
            registerModal,
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .components-header-box{
            /*-------------------------头部吸顶条-------------------------*/
            .ant-affix{
                z-index: 999;
            }
            .fixedTop-header {
                height: 60px;
                line-height: 60px;
                background: #333;
                >.container {
                    aside.quanguo-tel {
                        font-size: 20px;
                        color: #fff;
                        > span {
                            font-size: 20px;
                            color: #c6554b;
                        }
                    }
                    .fixedTop-header-ul {
                        float: right;
                        > em {
                            float: left;
                            height: 40px;
                            line-height: 40px;
                            color: #D4D4D4;
                        }
                        > li {
                            float: left;
                            width: 120px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            color: #fff;
                            position: relative;
                            /*ant-design-vue menu组件修改默认样式*/
                            .ant-menu-horizontal{
                                border: none !important;
                            }
                            >ul{
                                background: inherit;
                                height: 40px;
                                line-height: 40px;
                                >.ant-menu-item{
                                    width: 120px;
                                    padding: 0;
                                    color: #fff;
                                    border: none !important;
                                }
                                >.ant-menu-item-selected{
                                    color: #2d8cf0 !important;
                                }
                            }
                            > a {
                                font-size: 16px;
                                color: #fff;
                            }
                            > img {
                                width: 1em;
                                height: 1em;
                                vertical-align: -0.15em;
                                fill: currentColor;
                                overflow: hidden;
                            }
                        }
                        > li:nth-of-type(4),
                        > li:last-of-type {
                            border-right: none;
                        }
                        > li:last-of-type {
                            margin: 0 0 0 20px;
                            width: auto;
                            min-width: 120px;
                            > aside {
                                > a {
                                    font-size: 16px;
                                    color: #fff;
                                    > img {
                                        width: 40px;
                                        height: 40px;
                                        border-radius: 50%;
                                        outline: none;
                                        float: right;
                                        margin: 0 0 0 10px;
                                    }
                                }
                            }
                            >.is-login-box{
                                display: flex;
                                display: -webkit-flex;
                                align-items: center;
                                >a{
                                    >span{
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        text-align: right;
                                        white-space: nowrap;
                                        word-wrap: normal;
                                        height: 20px;
                                        line-height: 27px;
                                        display: inline-block;
                                        width: 100px;
                                    }
                                }
                            }
                        }
                        > li.Help-me-find-house {
                            > i {
                                color: #db5a4e;
                            }
                        }
                        > li.active {
                            > i,
                            > a {
                                color: #00b8ee;
                            }
                        }

                    }
                }
            }

            /*-------------------------头部导航条-------------------------*/
            >nav {
                padding: 20px 0 0 0;
                background: #fff;
                box-shadow: 0 2px 6px 0 rgba(83,83,83,.18);
                -webkit-box-shadow: 0 2px 6px 0 rgba(83,83,83,.18);
                -moz-box-shadow: 0 2px 6px 0 rgba(83,83,83,.18);
                -ms-box-shadow: 0 2px 6px 0 rgba(83,83,83,.18);
                -o-box-shadow: 0 2px 6px 0 rgba(83,83,83,.18);
                img {
                    max-width: 170px;
                }
            }
        }
        .ant-popover{
            .ant-popover-title{
                text-align: center;
            }
            .ant-popover-inner-content{
                figure{
                    width: 300px;
                    text-align: center;
                    >img{
                        width: 100%;
                    }
                }
            }
        }

        /*ant-design-vue menu组件修改默认样式*/
        .ant-menu-submenu-popup{
            text-align: center;
            background: #004eb3;
            .ant-menu-submenu-content{
                background: #004eb3;
                .ant-menu-item{
                    color: #fff;
                }
                .ant-menu-item:hover{
                    background: #e5eaef;
                    color: #ce322f;
                }
                .ant-menu-item-selected{
                    background: #e5eaef;
                    color: #ce322f;
                }
            }
        }
    }
</style>

